﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/themes/default/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#submit").click(
      function () {
          $("#popupB").popup("open");
      });
            $("#Button1").click(
      function () {
          $("#Div1").popup("open");
      });

        })  
    </script>
</head>
<body>
    <a data-transition="pop" data-rel="popup">
    <input type="text" data-role="date">
        <input type="button" value="OK" id="submit" /></a>
    <div id="popupB" data-role="popup">
        <div style="max-width: 280px;" id="popupCloseRight" class="ui-content" data-role="popup">
            <a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"
                href="#" data-rel="back">Close</a><p>
                    I have a close button at the top right corner with simple HTML markup.</p>
        </div>
    </div>
    <input class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="popup" type="button"
        value="OK" id="Button1" />
    <div style="max-width: 280px;" id="Div1" class="ui-content" data-role="popup">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"
            href="#" data-rel="back">Close</a><p>
                I have a close button at the top right corner with simple HTML markup.</p>
    </div>

    <a href="#popupCloseRight" data-rel="popup">
    <input type="button" value="OK" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"
        ></a>
    <div style="max-width: 400px;" id="Div2" class="ui-content" data-role="popup">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"
            href="#" data-rel="back">Close</a><p>
                I have a close button at the top right corner with simple HTML markup.</p>
    </div>
</body>
</html>
